
<style>
	article { width: 100%;  }
	article.gymSelect { height: 28px; }
	label.gymName { font-size: 20px; font-weight: bolder; color: #333; }
	input[name=gymName] { width: 500px; height: 32px; border-style: inset;  }
	button#btn_gymName { width: 60px; height: 32px; background-color: dodgerblue; border-radius: 5px; color: white; text-shadow: -1px -1px 1px #333; }
	.gymTitle span:nth-child(1) { font-size: 32px; font-weight: bolder; color: dodgerblue; text-shadow: 1px 1px 3px #333;  }
	.gymTitle span:nth-child(2) { font-size: 24px; font-weight: bolder; color: dodgerblue; margin-left: 20px; }

	article.charts { margin-top: 20px; }
	article.charts .line { width: 100%; margin-top: 10px; }
	article.charts section { height: 23vw; border: 1px solid darkorange; font-size: 14px; font-weight: bolder;  }
	aside.chartTitle { width: 80px; height: 30px; background-color: darkorange; font-size: 18px; line-height: 30px; text-align: center; border-radius: 5px; color: white; font-weight: bolder;}

	/*性别分析图*/
	section.userSex { width: 22%; }
	section.userSex > div { width: 100%; margin-top: 2vw; }
	section.userSex > .sexIcon { margin-top: 12%; }
	section.userSex > .sexIcon img { width: 25%;  }
	section.userSex > .percent_line { width: 80%; margin-left: 10%; height: 1vw; background-color: #be5108; margin-top: 10%; }
	section.userSex > .percent_line > .first_percent { width: 20%; height: 1vw; background-color: #1d4999; }

	/*BMI分析图*/
	section.userBMI { width: 32%; font-size: 0.8vw;}
	section.userBMI > .line { height: 40%; }
	section.userBMI .bmi_bom { width: 18%; height: 80%; }
	section.userBMI .bmi_bom :nth-child(1) { width: 100%; margin-left: 10%; height: 30%; text-align: center; overflow: visible;  }
	section.userBMI .bmi_bom :nth-child(2) { width: 40%; margin-left: 30%; height: 60%;  }
	section.userBMI .bom1 { background-color: #c23531 }
	section.userBMI .bom2 { background-color: #2f4554 }
	section.userBMI .bom3 { background-color: #61a0a8 }
	section.userBMI .bom4 { background-color: #d48265 }
	section.userBMI .bmi_data { width: 32%; height: 40%; margin-top: 5%; text-align: center; }
	section.userBMI .bim_data :nth-child(1) {}
	section.userBMI .bim_data :nth-child(2) {}

	/*年龄分析图*/
	section.userAge { width: 44%; }
	section.userAge > .line { width: 100%; height: 80%; }
	section.userAge > .line > div.chart { width: 65%; height: 100%;  }
	section.userAge > .line > div.chart_data { width: 35%; height: 100%;  }
	section.userAge > .line > div.chart_data > div { width: 50%; height: 80%; }
	section.userAge .chart_data > div > div { width: 80%; height: 3vw; line-height: 3vw; text-align: center; color: white; }
	section.userAge .chart_data > div > div:nth-child(1) {background-color: #c23531;}
	section.userAge .chart_data > div > div:nth-child(2) {background-color: #2f4554;}
	section.userAge .chart_data > div > div:nth-child(3) {background-color: #61a0a8;}
	section.userAge .chart_data > div > div:nth-child(4) {background-color: #d48265;}
	section.userAge .chart_data > div > div:nth-child(5) {background-color: #91c7ae;}
	section.userAge .chart_data > div > div:nth-child(6) {background-color: #749f83;}
	/*'#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83'*/


	/*身高分析图*/
	section.userHeight { width: 49%; position: relative; }
	section.userHeight > div.chart { width: 100%; height: 90%; }
	section.userHeight > aside.chartTitle { position: absolute; right: 0; bottom: 0; width: 30px; height: 80px; line-height: 40px;}

	/*体重分析图*/
	section.userWeight { width: 50%; position: relative; }
	section.userWeight > div.chart { width: 100%; height: 90%; }
	section.userWeight > aside.chartTitle { position: absolute; right: 0; bottom: 0; width: 30px; height: 80px; line-height: 40px;}

	@media (max-width: 1200px){
		article.gymSelect { height: 36px; }
		label.gymName { font-size: 28px; font-weight: bolder; color: #333; }
		input[name=gymName] { width: 400px; height: 40px; border-style: inset;  }
		button#btn_gymName { width: 90px; height: 40px;  }
		article > .line {width: 60vw; flex-flow: row wrap; justify-content: center;  }
		article > .line > section { margin-left: 10px; margin-top: 10px; height: 36vw;}
		section.userSex { width: 34vw; }
		section.userBMI { width: 45vw; }
		section.userAge { width: 80vw; }
		section.userHeight { width: 80vw; }
		section.userWeight { width: 80vw; }
	}
</style>

<div id="vm">

<article class="gymSelect">
	<label class="gymName">地区或门店：
	<input type="search" name="gymName" placeholder="请选择要查询的门店名称"  list="gymName" v-model="gymName">
	<datalist id="gymName">
		<option v-for="val in gymNameList" :value="val.gymName"></option>
	</datalist>
	</label>
	<span style="margin-left: 20px;"></span>
	<label><input type="checkbox" name="" v-model="is_zk" checked>正式学员</label>
	<span style="margin-left: 20px;"></span>
	<button id="btn_gymName">查询</button>
	
</article>
<article class="charts">
	<div class="gymTitle" v-show="loading"><span >加载中...</span><span></span></div>
	<div class="gymTitle" v-show="!loading"><span class="gymName">{{target}}:</span><span class="all_users">共计{{all_users}}人</span></div>
	<div class="line flex_rb">
		<section class="userSex"> 

			<aside class="chartTitle">性别</aside>
			<div class="sexIcon flex_rr"><img src="img/male.png"><img src="img/female.png"></div>
			<div class="flex_rr"><div>男性：{{malePercent}}%</div><div>女性：{{femalePercent}}%</div></div>
			<div class="percent_line"><div class="first_percent" :style="'width:'+malePercent+'%'"></div></div>
			<div class="percent_data flex_rr"><div>{{sex.male}}人</div><div>{{sex.female}}人</div></div>

		</section>
		<section class="userBMI">
			<aside class="chartTitle">BMI</aside>
			<div class="line flex_rr">
				<div class="bmi_bom"><div id="bmi1">{{bmi[0]}}人</div><div class="bom1"></div>	</div>
				<div class="bmi_data flex_cb"><div>偏瘦</div><div>BMI≤18.4</div><div id="bmir1">占比：{{bmiPercent[0]}}%</div></div>
				<div class="bmi_bom"><div id="bmi2">{{bmi[1]}}人</div><div class="bom2"></div>	</div>
				<div class="bmi_data flex_cb"><div>正常</div><div>18.5≤BMI≤23.9</div><div id="bmir2">占比：{{bmiPercent[1]}}%</div></div>
			</div>
			<div class="line flex_rr">
				<div class="bmi_bom"><div id="bmi3">{{bmi[2]}}人</div><div class="bom3"></div>	</div>
				<div class="bmi_data flex_cb"><div>偏胖</div><div>24.0≤BMI≤27.9</div><div id="bmir3">占比：{{bmiPercent[2]}}%</div></div>
				<div class="bmi_bom"><div id="bmi4">{{bmi[3]}}人</div><div class="bom4"></div>	</div>
				<div class="bmi_data flex_cb"><div>超胖</div><div>BMI≥28.0</div><div id="bmir4">占比：{{bmiPercent[3]}}%</div></div>
				
			</div>
		</section>
		<section class="userAge">
			<aside class="chartTitle">年龄</aside>
			<div class="line flex_rr">
				<div class="chart" id="userAge_chart" ></div>
				<div class="chart_data flex_rb">
					<div class="chart_data_title flex_cb">
						<div>25岁以下</div>
						<div>26~30岁</div>
						<div>31~35岁</div>
						<div>36~40岁</div>
						<div>41~45岁</div>
						<div>45岁以上</div>
					</div>
					<div class="chart_data_d flex_cb">
						<div>{{age[0]}}人</div>
						<div>{{age[1]}}人</div>
						<div>{{age[2]}}人</div>
						<div>{{age[3]}}人</div>
						<div>{{age[4]}}人</div>
						<div>{{age[5]}}人</div>
					</div>
				</div>
			</div>

			
		</section>
	</div>

	<div class="line flex_rb">
		<section class="userHeight">
			
			<div class="chart" id="userHeight_chart"></div>
			<aside class="chartTitle">身高</aside>
		</section>
		<section class="userWeight">
			
			<div class="chart" id="userWeight_chart"></div>
			<aside class="chartTitle">体重</aside>
		</section>	
	</div>			
</article>
</div>

<script>

	var option_pie = {
        tooltip: { trigger: 'item',  formatter: "{d}%" },
        // colors:[],
        series: [
            {
                name:'年龄段',
                type:'pie',
                radius: ['70%', '90%'],
                // avoidLabelOverlap: false,
                label: {normal: { formatter: "{d}%", position: "inner" }},
                labelLine: { normal: { show: false }},
                data:[
                    {value:22, name:'25岁以下'},
                    {value:20, name:'26~30岁'},
                    {value:20, name:'31~35岁'},
                    {value:20, name:'36~40岁'},
                    {value:30, name:'41~45岁'},
                    {value:40, name:'45岁以上'}
                ]
            }
        ]
    }



    var option_height = {
        tooltip: { trigger: 'axis', axisPointer: {type: 'cross'}},
        grid: {bottom: '25%'},
        legend: {data:['人数','占比'],left: 'center',bottom: 0},
        xAxis: [
            { type: 'category', axisTick: {alignWithLabel: true}, axisLabel: {rotate: 25},
              data: ['155cm以下','156~160cm','161~165cm','166~170cm','171~175cm','176~180cm','180cm以上']
            }
        ],
        yAxis: [
            { type: 'value', name: '人数', min: 0, position: 'left', axisLabel: {formatter: '{value}'} },
            { type: 'value', name: '占比', min: 0, position: 'right', axisLabel: {formatter: '{value}%'}, splitLine: {show: false} }
        ],
        series: [
            {
                name:'人数',
                type:'bar',
                barCategoryGap: '70%',
                itemStyle:{ normal:{ color: 'steelblue'}},
                label: {  normal: {show: true,  formatter: "{c}",position: "inside", color: 'black' }},
                data:[2,2,2,2,2,2,2]
            },
            {
                name:'占比',
                type:'line',
                itemStyle:{ normal:{ color: 'darkorange', }},
                label: { normal: { show: true,  formatter: "{c}%",  position: "top",  }},
                yAxisIndex: 1,
                data:[5,5,5,5,5,5,5]
            }
        ]
    }



    var option_weight = {
        
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        grid: {
            bottom: '25%'
        },

        legend: {
            data:['人数','占比'],
            left: 'center',
            top: 'bottom'
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    rotate: 25
                },
                splitLine: {
                    show: true
                },
                data: ['45kg以下','46~50kg','51~55kg','56~60kg','61~65kg','66~70kg', '71~75kg', '76以上']
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '人数',
                min: 0,
                position: 'left',
                axisLabel: {
                    formatter: '{value}'
                },
                
                splitLine: {
                    show: false
                }
            },
            {
                type: 'value',
                name: '占比',
                min: 0,
                position: 'right',
                axisLabel: {
                    formatter: '{value}%'
                },
                
                splitLine: {
                    show: false
                }
            }
        ],
        series: [
            {
                name:'人数',
                type:'line',
                itemStyle:{
                    normal:{
                        color: 'steelblue'
                    }
                },
                label: {
                    normal: {
                        show: true,
                       formatter: "{c}",
                       position: "bottom",
                       color: 'black'

                    }
                },
                data:[]
            },
            {
                name:'占比',
                type:'line',
                itemStyle:{
                    normal:{
                        color: 'darkorange'
                    }
                },
                label: {
                    normal: {
                        show: true,
                       formatter: "{c}%",
                       position: "top",
                       color: 'darkorange'

                    }
                },
                yAxisIndex: 1,
                data:[]
            }
        ]
    }



	var vm = new Vue({
		el: "#vm",
		data: {
			gymNameList: [],
			gymName: "北京", 	// 对应下拉选框选择结果
			target: '全国学员数',			// 对应查询结果显示的目标
			is_zk: true,
			all_users: 0,
			sex: {male: 0, female: 0},
			bmi: [0, 0, 0, 0],
			age: [0, 0, 0, 0, 0, 0],
			height: [],
			weight: [],

			malePercent: 0,
			femalePercent: 0,
			bmiPercent: [0, 0, 0, 0],

			userAge_chart: null,
			userHeight_chart: null,
			userWeight_chart: null,

			loading: false,

		},
		computed: {
			ajax_do: function(){
				if(this.is_zk){
					return "getGymUsers_zk";
				}else{
					return "getGymUsers";
				}
			},
		},
		methods: {
			initCharts: function(){
				
			},
			computePercents: function(){
				if(this.sex.male + this.sex.female > 0){
					this.malePercent = (this.sex.male / (this.sex.male + this.sex.female) * 100).toFixed(2);
					this.femalePercent = (this.sex.female / (this.sex.male + this.sex.female) * 100).toFixed(2);
				}else{
					this.malePercent = 0;
					this.femalePercent = 0;
					this.malePercentLine = 0;
				}
				let all_bmi = this.bmi[0] + this.bmi[1] + this.bmi[2] + this.bmi[3];
				if(all_bmi){
					for(let i = 0; i<4; i++){
						this.bmiPercent[i] = (this.bmi[i] / all_bmi * 100).toFixed(2);
					}
				}
			},
			showDatas: function(){
				this.loading = true;
				var that = this;
				$.get(dataDomain + "getData.php", {do: this.ajax_do, gymName: this.gymName}, function(r){
					console.log(r)
					that.loading = false;
					data = JSON.parse(r);
					that.all_users = data.length;
					var sex = {male: 0, female: 0};
					var bmi = [0, 0, 0, 0];
					var age = [0, 0, 0, 0, 0, 0];
					var height = [0, 0, 0, 0, 0, 0, 0];
					var weight = [0, 0, 0, 0, 0, 0, 0, 0];

					for(var i in data){
						var x = data[i];
						if(x.sex == 1){
							sex.male ++;
						}else if(x.sex == 2){
							sex.female ++;
						}else{
							sex.norecord ++;
						}

						var b = Math.ceil(x.weight / x.height / x.height * 100000);
						// console.log(b)
						if(b){
							if(b <= 184){
								bmi[0] ++ ;
							}else if(b <= 239){
								bmi[1] ++ ;
							}else if(b <= 279){
								bmi[2] ++ ;
							}else{
								bmi[3] ++
							}
						}

						var a = Number(x.age);
						if(a){
							if(a <= 25) {
								age[0] ++ ;
							}else if(a <= 30){
								age[1] ++ ;
		 					}else if(a <= 35){
		 						age[2] ++ ;
		 					}else if(a <= 40){
		 						age[3] ++ ;
		 					}else if(a <= 45){
		 						age[4] ++ ;
		 					}else {
		 						age[5] ++ ;
		 					}
						}

						var h = data[i].height;
						if(h){
							if(h <= 155){
								height[0] ++ ;
							}else if(h <= 160){
								height[1] ++ ;
							}else if(h <= 165){
								height[2] ++ ;
							}else if(h <= 170){
								height[3] ++ ;
							}else if(h <= 175){
								height[4] ++ ;
							}else if(h <= 180){
								height[5] ++ ;
							}else{
								height[6] ++ ;
							}
						}

						var w = x.weight;
						if(w){
							if(w <= 45){
								weight[0] ++ ;
							}else if(w <= 50){
								weight[1] ++ ;
							}else if(w <= 55){
								weight[2] ++ ;
							}else if(w <= 60){
								weight[3] ++ ;
							}else if(w <= 65){
								weight[4] ++ ;
							}else if(w <= 70){
								weight[5] ++ ;
							}else if(w <= 75){
								weight[6] ++ ;
							}else {
								weight[7] ++ ;
							}
						}


					}
					that.sex = sex;
					that.bmi = bmi;
					that.age = age;
					that.height = height;
					that.weight = weight;
					// console.log(height)

					that.computePercents();
					// console.log(that.$data)

					for (var i = 0; i < age.length; i ++){
						option_pie.series[0].data[i].value = age[i];
					}
			
					
					option_height.series[0].data = height;
					var heightR = [];
					var goodheight = 0;
					for (var i = 0; i < 7; i ++){
						goodheight += height[i];
					}
					for (var i = 0; i < 7; i ++){
						heightR[i] = Math.round(height[i] / goodheight * 100);
					}
					option_height.series[1].data = heightR;

					option_weight.series[0].data = weight;
					var weightR = [];
					var goodweight = 0;
					for (var i = 0; i < 8; i++){
						goodweight += weight[i];
					}
					for(var i = 0; i < 8; i ++){
						weightR[i] = Math.round(weight[i] / goodweight * 100);
					}
					option_weight.series[1].data = weightR;

					// console.log(JSON.stringify(option_pie));

					let userAge_chart = echarts.init(document.getElementById("userAge_chart"));
					let userHeight_chart = echarts.init(document.getElementById("userHeight_chart"));
					let userWeight_chart = echarts.init(document.getElementById("userWeight_chart"));
					
					userAge_chart.setOption(option_pie);
					userHeight_chart.setOption(option_height);
					userWeight_chart.setOption(option_weight);


				});
			}
			

		},

	})



    console.log("show user");
    vm.$nextTick(function(){
    	vm.initCharts();
    	vm.showDatas();
    })

	$.get(dataDomain + "gymlist.php", function(r){
		// console.log(r)
		vm.gymNameList = r;
	}, 'json')	
	$("input[name=gymName]").click(function(){
		vm.gymName = "";
	})


	$("button#btn_gymName").click(function(){
		if(! vm.gymName){
			alert ("请选择门店！");
			return ;
		}
		if(vm.gymName == "全国" && ! vm.is_zk){
			alert ("抱歉！全国非正式会员数据量过大,超出浏览器加载上限。");
			return ;
		}
		if(vm.is_zk) {
			vm.target = vm.gymName +　"正式学员数";
		}else{
			vm.target = vm.gymName + "学员数";
		}
		vm.showDatas();
	})

	$("button#btn_gymName").click();

</script>

